<template>
  <div class="reportcharts">
    <h2>{{title}}分时展示</h2>
    <div class="echardiv">
      <div class="repData" :id="kpiEchartsId"></div>
    </div>
  </div>
</template>

<script>
  let echarts = require("echarts");
  export default {
    props:{
      title:'',
      x_data:{
        default: function() {
          return []
        }
      },
      y_name:{
        default: function() {
          return []
        }
      },
      y_data:{
        default: function() {
          return []
        }
      },
      y_danwei:{
        default: function() {
          return ''
        }
      }
    },
    data() {
      return {
        option: {
          title: {
            text: '',
            left: 'center',
            textStyle: {
              color: '#ccc',
              fontSize: 16,
            }
          },
          legend: {
            data: [],
            top: 20
          },
          color: ['#2c69f3'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '0',
            top: '15%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: '',
            axisTick: {
              alignWithLabel: true
            }
          },
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: {
            name: '',
            type: 'bar',
            barMaxWidth: '50px',
            data: '',
            markPoint: {
              data: [
                {type: 'max', name: '最大值'},
                {type: 'min', name: '最小值'}
              ]
            },
            markLine: {
              data: [
                {type: 'average', name: '平均值'}
              ]
            }
          }
        },
        defaultEcharts:{            //默认样式与无数据图片
          title:{
            show:true,
            text:"暂 无 数 据",
            textAlign:'center',
            left:'48%',
            top:'45%',
            textStyle:{
              fontSize:16,
              color:'#b4b6bd',
            }
          },
          grid: {
            x: 70,
            x2: "8%"
          },
          backgroundColor:{
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: '#f5f8fe' // 0% 处的颜色
            }
            ],
            global: false // 缺省为 false
          },

          series: []
        },
        myChart: null,
        kpiEchartsId:'kpiEcharts'+ Number(
          Math.random()
            .toString()
            .substr(3, 15) + Date.now()
        ).toString(36)
      }
    },
    mounted(){
      setTimeout(() => {
        window.onresize = () => {
          this.loadEchartResize("");
        };
      }, 200);
      //点击收缩按钮
      this.$Bus.$on("ArrowClick", w => {
        this.loadEchartResize(w);
      });
      this.myChart = echarts.init(document.getElementById(this.kpiEchartsId));
      this.loadEchart(this.defaultEcharts);
      setTimeout(() => {
        this.loadEchartResize("");
      }, 200);
    },
    beforeDestroy(){
      this.$Bus.$off('ArrowClick');
      window.onresize=null;
    },
    methods:{
      UpData(ishavedata){
        if(ishavedata==false || this.y_data.length==0){
          this.loadEchart(this.defaultEcharts);
          return ;
        }
        let option={};
        option.legend={
          type: 'scroll',
          orient: "horizontal",
          width:'70%',
          top: "15",
          left:'center',
          itemGap: 20,
        };
        
        let max=1;
          for(let i=0;i<this.y_data.length;i++)
          {
            for(let j=0;j<this.y_data[i].length;j++)
            {
              max=max<this.y_data[i][j]?this.y_data[i][j]:max;
            }
          }
        max=max.toString().length;
        option.grid={
          left:max>3?(max*10)+5:40,
          right:(max*10)+35,
          top:80,
          bottom:120,
        };
        option.tooltip={
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: function(params) {
            //自定义函数修改折线图给数据加单位
            let str = ""; //声明一个变量用来存储数据
            str += "<div>" + params[0].name + "</div>"; //显示日期的函数
            for (let i = 0; i < params.length; i++) {
              //图显示的数据较多时需要循环数据，这样才可以成功的给多条数据添加单位
              str +=
                '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
                params[i].color +
                ';"></span>' +
                params[i].seriesName +
                "</span> : <span>" +
                (params[i].seriesName.includes('率')
                  ? params[i].data + "%"
                  : params[i].data) +
                "</br>";
            }
            return str;
          }
        };
        option.color= ['#2c69f3','#ffc02e'];
        option.toolbox={
          right: "0",
          top: "0",
          feature: {
            magicType: {
              show: true,
              type: ["line", "bar"]
            },
            restore: {
              show: true
            },
            saveAsImage: { show: true }
          }
        };
        option.nameLocation="center";
        option.xAxis=[
          {
            type: "category",
            gridIndex: 0,
            data:this.x_data,
            align: "center",
            axisLabel:{
              padding:[30,0,0,0],
              show: true,
              rotate: 30,
            }
          },
          
        ];
        option.yAxis=[
          {
            type: "value",
            name:this.y_danwei,
            position: 'left',
            axisLine: {
              lineStyle: {
                color: '#2c69f3'
              }
            }
          }
        ];
        
        option.series=[
          {
            name:this.y_name[0],
            type:'bar',
            data:this.y_data[0],
            barMaxWidth: '50px',
            markPoint: {
              data: [
                {
                  type: "max",
                  name: "最大值",
                  fontSize:16,
                  fontWeight:'bold'
                },
                {
                  type: "min",
                  name: "最小值",
                  fontSize:16,
                  fontWeight:'bold'
                }
              ],
            },
            markLine : {
                data : [
                    {type : 'average', name: '平均值'}
                ]
            },
            itemStyle: {
              color: {
                x:0,
                y:0,
                x2:0,
                y2:1,
                colorStops: [{
                  offset: 0, color: "#2c69f3"  // 0% 处的颜色
                }, {
                  offset: 1, color:  '#fff'   // 100% 处的颜色
                }],
                global: false // 缺省为 false
              },
						  normal: {
								label: {
									show: true, //开启显示
									position: 'top', //在上方显示
									textStyle: { //数值样式
										color: 'black',
                    fontSize: 14,
                    fontWeight:'bold'
									}
								}
							}
            },
            lineStyle:{
                  color: {
                      x:0,
                      y:0,
                      x2:0,
                      y2:1,
                      colorStops: [{
                        offset: 0, color: "#2c69f3"  // 0% 处的颜色
                      }, {
                        offset: 1, color:  '#fff'   // 100% 处的颜色
                      }],
                      global: false // 缺省为 false
                  }
            },
            areaStyle: {
              color: {
                    x:0,
                    y:0,
                    x2:0,
                    y2:1,
                    colorStops: [{
                      offset: 0, color: "#2c69f3"  // 0% 处的颜色
                    }, {
                      offset: 1, color:  '#fff'   // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                }

            },
          },
          {
            name:this.y_name[1],
            type:'bar',
            data:this.y_data[1],
            barMaxWidth: '50px',
            markPoint: {
              data: [
                {
                  type: "max",
                  name: "最大值",
                  fontSize:16,
                  fontWeight:'bold'
                },
                {
                  type: "min",
                  name: "最小值",
                  fontSize:16,
                  fontWeight:'bold'
                }
              ],
            },
            markLine : {
                data : [
                    {type : 'average', name: '平均值'}
                ]
            },
            itemStyle: {
              color: {
                x:0,
                y:0,
                x2:0,
                y2:1,
                colorStops: [{
                  offset: 0, color: "#ffc02e"  // 0% 处的颜色
                }, {
                  offset: 1, color:  '#fff'   // 100% 处的颜色
                }],
                global: false // 缺省为 false
              },
						  normal: {
								label: {
									show: true, //开启显示
									position: 'top', //在上方显示
									textStyle: { //数值样式
										color: 'black',
                    fontSize: 14,
                    fontWeight:'bold'
									}
								}
							}
            },
            lineStyle:{
                  color: {
                      x:0,
                      y:0,
                      x2:0,
                      y2:1,
                      colorStops: [{
                        offset: 0, color: "#ffc02e"  // 0% 处的颜色
                      }, {
                        offset: 1, color:  '#fff'   // 100% 处的颜色
                      }],
                      global: false // 缺省为 false
                  }
            },
            areaStyle: {
              color: {
                    x:0,
                    y:0,
                    x2:0,
                    y2:1,
                    colorStops: [{
                      offset: 0, color: "#ffc02e"  // 0% 处的颜色
                    }, {
                      offset: 1, color:  '#fff'   // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                }

            },
          },
        ];
        option.dataZoom=[
          {
            show: true,
            start: 0,
            end: 100,
            height:30,
          },
          {
            type: 'slider',
            start: 0,
            end: 100,
          },
        ]
        this.loadEchart(option);
      },
      loadEchart(option) {
        this.myChart.setOption(option, true);
      },
      loadEchartResize(w) {
        let opts;
        if (this.isEmpty(w)) opts = { width: w+110 };
        else {
          let con_w = $(".echardiv").width();
          opts = { width: con_w };
        }
        this.myChart.resize(opts);
      },
      isEmpty(obj) {
        if (typeof obj == "undefined" || obj == null || obj == "") {
          return false;
        } else {
          return true;
        }
      },
    }
  }
</script>

<style scoped lang="scss">
  .reportcharts{
    width: 100%;
    height: 600px;
    background: #fff;
    padding: 35px 10px 20px 35px;
    overflow: hidden;
    > h2 {
      line-height: 1;
      font-weight: 600;
      font-size: 20px;
      letter-spacing: 1px;
      display: inline-block;
      margin-right: 20px;
    }
    .echardiv{
      width: 100%;
      height: 520px;
      margin-top: 20px;
      .repData {
        width: 100%;
        height: 520px;
      }
    }

  }

</style>